<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Info Window Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">


function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");
    
  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '200px';
  }
}

  function initialize() {
  
    detectBrowser();
    //$selected, $notselected
    var myLatlng = new google.maps.LatLng(<!--[$view.position_latitude]-->,<!--[$view.position_longitude]-->);
    var myOptions = {
      scrollwheel: false,
      zoom: 15,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }

    //'http://google-maps-icons.googlecode.com/files/bedandbreakfast1.png'
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //'http://www.google.com/mapfiles/marker.png'
    var poverty = [
                    
                      [
                        '<!--[$view.name]-->', 
                        '<!--[$view.name]-->', 
                        <!--[$view.position_latitude]-->,
                         <!--[$view.position_longitude]-->, 
                        <!--[$view.id]-->,
                        'modules/POBHotel/pnimages/hostel_0star.png'
                      ],
               
                  ];

      setMarkers(map, poverty);
    }

function makeMarker(imageName){
  //alert(imageName); 
  var iconImage = new google.maps.MarkerImage(imageName,
      // This marker is 20 pixels wide by 34 pixels tall.
      new google.maps.Size(20, 34),
      // The origin for this image is 0,0.
      new google.maps.Point(0,0),
      // The anchor for this image is at 9,34.
      new google.maps.Point(9, 34));
    return iconImage;
}

function makeShadow(){
  var iconShadow = new google.maps.MarkerImage('http://www.google.com/mapfiles/shadow50.png',
      // The shadow image is larger in the horizontal dimension
      // while the position and offset are the same as for the main image.
      new google.maps.Size(37, 34),
      new google.maps.Point(0,0),
      new google.maps.Point(9, 34));
    return iconShadow;
}
  
  function setMarkers(map, locations) {

    for (var i = 0; i < locations.length; i++) {
      var data = locations[i];
      var myLatLng = new google.maps.LatLng(data[2], data[3]);
     var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          //shadow: makeShadow(),
          icon: data[5],
          //shape: shape,
          title: data[0],
          zIndex: data[4]
      });

                   
    var contentString = data[1];
        
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    
    
    google.maps.event.addListener(marker, 'click', infoCallback(infowindow, marker));
    
    }
    
    function infoCallback(infowindow, marker) {
      return function() {
      infowindow.open(map, marker);
  };
}
  }


</script>

</head>

<body onload="initialize()">
    <div id="map_canvas" style="position:relative;width:490px; height:200px;"></div><BR>
</body>
</html>

